<template>
  <div class="app-container">
    <!-- 内容 -->

    <el-row :gutter="22">
      <el-col :span="12">
        <div class="content">
          <div style="padding-bottom:6px;">
              <el-tag>卡微信IP配置</el-tag>
          </div>
          <el-table
            v-loading="listLoading"
            :data="WxIpList || [{}]"
            border
            highlight-current-row
            :row-class-name="tableRowClassName"
            :default-sort="{ order: 'ascending' }"
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              min-width="10"
            ></el-table-column>
            <el-table-column
              label="卡"
              min-width="50"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.name }} {{ row.bank_name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="手机"
              min-width="50"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.tel }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="微信iP"
              min-width="50"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.addr_wx }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="4"
        ><div class="content">
          <div style="padding-bottom:6px;">
            <el-tag>可用微信IP</el-tag>
          </div>
          <el-table
            v-loading="listLoading"
            :data="usable_ip || [{}]"
            border
            highlight-current-row
            :row-class-name="tableRowClassName"
            :default-sort="{ order: 'ascending' }"
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              min-width="10"
            ></el-table-column>
            <el-table-column
              label="卡"
              min-width="50"
              class-name="end_times"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
    </el-row>
  </div>
</template>


<script>
import { WxipDetail_card } from "@/api/table.js";
export default {
  created() {
    // console.log(this.$route.params.id);
    this.WxipDetail_card(this.$route.params.id);
  },
  data() {
    return {
      listLoading:false,
      WxIpList: [{}],
      usable_ip: [],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex % 2)
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    WxipDetail_card(id) {
      WxipDetail_card({
        id,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.WxIpList = res.data;
        this.usable_ip = res.usable_ip;
      });
    },
  },
  components: {},
};
</script>

<style scoped lang='less'>
</style>
